/**
 * Created by rjx0801 on 16/4/1.
 */
//
// var line1 =
//        [['2016-03-01', 110000], ['2016-03-02', 210000], ['2016-03-03', 150000], ['2016-03-04', 170000],
//         ['2016-03-05', 90000], ['2016-03-06', 123321], ['2016-03-07', 121212], ['2016-03-07', 231321],
//         ['2016-03-08', 189991], ['2016-03-09', 162111], ['2016-03-10', 123211], ['2016-03-11', 123213],
//         ['2016-03-12', 223232], ['2016-03-13', 321321],['2016-03-14', 123444],['2016-03-15', 444312],
//         ['2016-03-16', 232131], ['2016-03-17', 434343], ['2016-03-18', 523213], ['2016-03-19', 532321],
//         ['2016-03-20', 434343], ['2016-03-21', 421312], ['2016-03-22', 556565], ['2016-03-23', 545435],
//         ['2016-03-24', 756565], ['2016-03-25', 867676], ['2016-03-26', 986766], ['2016-03-27', 657565],
//         ['2016-03-28', 211343], ['2016-03-29', 432312], ['2016-03-30', 412312], ['2016-03-31', 767875]];

$(function() {

    var date = $("#datetimepicker").val();

    $("#datetimepicker").datetimepicker({

        startView:"3",    //日期时间选择器打开之后首先显示的视图。 可接受的值：
        minView:"3",         //日期时间选择器所能够提供的最精确的时间选择视图。
        todayHighlight:"true",  //如果为true, 高亮当前日期
        format: "yyyy-mm", //选择日期后，文本框显示的日期格式
        language: 'zh-CN', //汉化
        autoclose:true //选择日期后自动关闭

    });

    $.ajax({
        type: "POST", //提交的类型
        dataType: "json",
        url: "/dtm/getInfoByMonth/"+date, //提交地址
        success: function (msg) {
            var dataValue = new Array(); //数据
            var ticks = new Array(); //横坐标值
            $(msg).each(function (index, value) {
                dataValue.push(msg[index].traffic);
                ticks.push(msg[index].occurred_on);
            });
            $("#chart").html("");
            var plot1 = $.jqplot('chart', [dataValue], {
                animate: !$.jqplot.use_excanvas, //是否动画显示
                seriesDefaults: {
                    renderer: $.jqplot.BarRenderer, // 利用渲染器（BarRenderer）渲染现有图表
                    pointLabels: { show: true }
                },
                title: date+'月流量明细', //标题
                axes: {
                    xaxis: {
                        renderer: $.jqplot.CategoryAxisRenderer, // 设置横（纵）轴上数据加载的渲染器
                        ticks: ticks//设置横（纵）坐标的刻度上的值，可为该ticks数组中的值
                    },
                    yaxis: {
                        pad: 1.05, // 一个相乘因子
                        tickOptions: { formatString: '%d(M)'}// 设置坐标轴上刻度值显示格式
                    }
                },
                highlighter: {
                    show: true,
                    sizeAdjust: 0,
                    lineWidthAdjust: 0,
                    tooltipContentEditor:tooltipContentEditor
                }
            });
        }
    });
});


function submitForm() {

    var date = $("#datetimepicker").val();

    $('#ff').form('submit', {

        onSubmit: function () {
            var isValid = $(this).form('validate');
            return isValid;	// return false will stop the form submission
        },
        success: function () {
            $.ajax({
                type: "POST", //提交的类型
                dataType: "json",
                url: "/dtm/getInfoByMonth/"+date, //提交地址
                success: function (msg) {
                    var dataValue = new Array(); //数据
                    var ticks = new Array(); //横坐标值
                    $(msg).each(function (index, value) {
                        dataValue.push(msg[index].traffic);
                        ticks.push(msg[index].occurred_on);
                    });
                    $("#chart").html("");
                    var plot1 = $.jqplot('chart', [dataValue], {
                        animate: !$.jqplot.use_excanvas, //是否动画显示
                        seriesDefaults: {
                            renderer: $.jqplot.BarRenderer, // 利用渲染器（BarRenderer）渲染现有图表
                            pointLabels: { show: true }
                        },
                        title: date+'月流量明细', //标题
                        axes: {
                            xaxis: {
                                renderer: $.jqplot.CategoryAxisRenderer, // 设置横（纵）轴上数据加载的渲染器
                                ticks: ticks//设置横（纵）坐标的刻度上的值，可为该ticks数组中的值
                            },
                            yaxis: {
                                pad: 1.05, // 一个相乘因子
                                tickOptions: { formatString: '%d(M)'}// 设置坐标轴上刻度值显示格式
                            }
                        },
                        highlighter: {
                            show: true,
                            sizeAdjust: 0,
                            tooltipContentEditor:tooltipContentEditor
                        }
                    });
                }
            });
        }

    });

}

function tooltipContentEditor(str, seriesIndex, pointIndex, plot) {
    // 显示series_label, x-axis_tick, y-axis 数据
    return plot.data[seriesIndex][pointIndex];
}









